<template>
	<view>
		<uni-nav-bar dark background-color="#2477f4" style="position: fixed; top: 0; width: 750rpx; z-index: 999;" title="应急救援" :border="false"></uni-nav-bar>
		<view class="bc"></view>
		<view class="bc2">
			<view class="image">
				<map style="width: 100%; height: 300px;" :latitude="latitude" :longitude="longitude" :markers="covers"></map>
			</view>
			
		</view>
		<!-- 服务项目部分 -->
		<view class="serviceItem">
			<view class="tab-container">
				<view @click="changeService('0')" :class="status == 0?'checked':''">搭电</view>
				<view @click="changeService('1')" :class="status == 1?'checked':''">换胎</view>
				<view @click="changeService('2')" :class="status == 2?'checked':''">拖车</view>
			</view>
			<view v-if="status === '0'" class="list">
				<!-- 搭电表单内容 -->
				<uni-forms ref="baseForm" :modelValue="baseFormData">
					<view class="from">
						<view class="choose">
							<uni-forms-item label="位置" >
								<uni-easyinput v-model="baseFormData.name" placeholder="请输入位置" />
							</uni-forms-item>
							<uni-forms-item label="求助人">
								<uni-easyinput v-model="baseFormData.name" placeholder="请输入姓名" />
							</uni-forms-item>
							<uni-forms-item label="联系方式">
								<uni-easyinput v-model="baseFormData.name" placeholder="请输入联系方式" />
							</uni-forms-item>
							<uni-forms-item label="车牌">
								<uni-easyinput v-model="baseFormData.name" placeholder="请输入车牌号" />
							</uni-forms-item>
							<uni-forms-item label="概述">
								<uni-easyinput type="textarea" v-model="baseFormData.name" placeholder="请简单描述您的情况..." />
							</uni-forms-item>
						</view>
						<button class="btn" @click="submit('baseForm')">呼叫救援</button>
					</view>
				</uni-forms>
			</view>
			<view v-if="status === '1'" class="list">
				<!-- 换胎表单内容 -->
				<uni-forms ref="baseForm" :modelValue="baseFormData">
					<view class="from">
						<view class="choose">
							<uni-forms-item label="位置" >
								<uni-easyinput v-model="baseFormData.name" placeholder="请输入位置" />
							</uni-forms-item>
							<uni-forms-item label="求助人">
								<uni-easyinput v-model="baseFormData.name" placeholder="请输入姓名" />
							</uni-forms-item>
							<uni-forms-item label="联系方式">
								<uni-easyinput v-model="baseFormData.name" placeholder="请输入联系方式" />
							</uni-forms-item>
							<uni-forms-item label="车牌">
								<uni-easyinput v-model="baseFormData.name" placeholder="请输入车牌号" />
							</uni-forms-item>
							<uni-forms-item label="概述">
								<uni-easyinput type="textarea" v-model="baseFormData.name" placeholder="请简单描述您的情况..." />
							</uni-forms-item>
						</view>
						<button class="btn" @click="submit('baseForm')">呼叫救援</button>
					</view>
				</uni-forms>
			</view>
			<view v-if="status === '2'" class="list">
				<!-- 拖车表单内容 -->
				<!-- 基础用法，不包含校验规则 -->
				<uni-forms ref="baseForm" :modelValue="baseFormData">
					<view class="from">
						<view class="choose">
							<uni-forms-item label="起点" >
								<uni-easyinput v-model="baseFormData.name" placeholder="请输入位置" />
							</uni-forms-item>
							<uni-forms-item label="终点" >
								<uni-easyinput v-model="baseFormData.name" placeholder="请输入位置" />
							</uni-forms-item>
							<uni-forms-item label="求助人">
								<uni-easyinput v-model="baseFormData.name" placeholder="请输入姓名" />
							</uni-forms-item>
							<uni-forms-item label="联系方式">
								<uni-easyinput v-model="baseFormData.name" placeholder="请输入联系方式" />
							</uni-forms-item>
							<uni-forms-item label="车牌">
								<uni-easyinput v-model="baseFormData.name" placeholder="请输入车牌号" />
							</uni-forms-item>
							<uni-forms-item label="概述">
								<uni-easyinput type="textarea" v-model="baseFormData.name" placeholder="请简单描述您的情况..." />
							</uni-forms-item>
						</view>
						<button class="btn" @click="submit('baseForm')">呼叫救援</button>
					</view>
				</uni-forms>
			</view>
			<navigator url="/pages/rescueRecords/rescueRecords" class="records">
				救援记录
				<uni-icons type="right" size="15"></uni-icons>
			</navigator>
		</view>
		<!-- 警务救助部分 -->
		<view class="policeAssistance">
			<view class="title">
				<text>警务救助</text>
			</view>
			<view class="infoItem">
				<view>
					<image src="/static/交通事故 拷贝@2x.png" mode=""></image>
					<view class="info1">交通事故</view>
					<view >122</view>
				</view>
				<view>
					<image src="/static/火警@2x.png" mode=""></image>
					<view class="info1">火警</view>
					<view >119</view>
				</view>
				<view>
					<image src="/static/急救包@2x.png" mode=""></image>
					<view class="info1">急救中心</view>
					<view >120</view>
				</view>
				<view>
					<image src="/static/警察,公安@2x.png" mode=""></image>
					<view class="info1">公安报警</view>
					<view >110</view>
				</view>
			</view>
		</view>
		<view class="aaa">
			
		</view>
		<CustomNavigationBar :currentTab="currentTab" @updateCurrentTab="updateCurrentTab" />
	</view>
	
</template>

<script>
	import CustomNavigationBar from "@/components/CustomNavigationBar.vue";
	export default {
		components: {
		    CustomNavigationBar
		},
		data() {
			return {
				// 状态值，初始设为搭电，可根据需求修改
				status: '0',
				// 基础表单数据
				baseFormData: {
					name: '',
					age: '',
					introduction: '',
					sex: 2,
					hobby: [5],
					datetimesingle: 1627529992399
				},
				currentTab: 1 // 初始化 currentTab
			}
		},
		methods: {
			changeService(val) {
				this.status = val;
				console.log("当前服务事件为：" + val) // 这里可以根据不同的serviceType进行后续操作，比如显示对应表单等
			},
			updateCurrentTab(newCurrentTab) {
			    this.currentTab = newCurrentTab;
			}
		}
	}
</script>

<style>
	
	/* ::v-deep .uni-nav-bar{
		position: fixed !important;
		top: 0 !important;
	} */
	/* 开头部分样式开始 */
	.bc {
		width: 750rpx;
		height: 300rpx;
		position: relative;
		border-top: 2rpx solid #2477f4;
		background-color: #2477f4;
	}

	.bc2 {
		z-index: 10;
		top: 88rpx;
		width: 650rpx;
		margin: 0 20rpx 0;
		position: absolute;
		padding: 30rpx;
		border-radius: 20rpx;
		background-color: white;
	}

	/* .container {
		display: flex;
		height: 40rpx;
		line-height: 40rpx;
	} */

	.image {
		z-index: 100;
		width: 650rpx;
		height: 420rpx;
		border-radius: 20rpx;
		overflow: hidden;
	}

	.serviceItem {
		width: 650rpx;
		margin: 20rpx;
		margin-top: 300rpx;
		padding: 30rpx 30rpx;
		border-radius: 20rpx;
		background-color: white;
	}

	.tab-container {
		width: 650rpx;
		font-size: 36rpx;
		font-weight: bold;
		display: flex;
		justify-content: space-between;
	}

	.tab-container>view {
		width: 100rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
	}

	.checked {
		border-bottom: 6rpx solid #2477f4;
	}

	

	::v-deep .from .uni-forms-item {
		margin-bottom: 0rpx
	}
	
	::v-deep .from .uni-forms-item {
		margin-bottom: 0rpx
	}
	
	::v-deep .from .uni-forms-item__label {
		width: 150rpx !important;
		display: flex;
		padding: 0rpx;
		justify-content: center !important;
		align-items: center !important;
		background-color: aliceblue;
		margin-right: 10rpx;
		background-color: #4fa2ff;
		color: #fff;
		border-radius: 40rpx;
	}

	::v-deep .uni-forms-item__content .is-input-border {

		border-radius: 40rpx;
		background-color: #4fa2ff;
	}
	
	/* ::v-deep .uni-forms-item__content .is-input-border>:nth-child(5) {
	
		border-radius: 20rpx;
		background-color: #4fa2ff;
	} */

	.choose {
		display: flex;
		flex-direction: column;
		padding: 10rpx 0rpx 0rpx 0rpx;
		row-gap: 30rpx;
		margin-top: 30rpx;

	}

	
	::v-deep .uni-forms-item__label {
		width: 0rpx !important;
		color: transparent;
	}

	::v-deep uni-button {
		border-radius: 30rpx;
		background-color: #406cf3;
	}
	
	.btn{
		width: 500rpx;
		height: 80rpx;
		color: white;
		margin-top: 40rpx;
		border-radius: 40rpx;
		line-height: 80rpx;
		background-color: #ff4001;
	}
	
		
	.records{
		width: 650rpx;
		color: gray;
		margin-top: 30rpx;
		text-align: center;
	}
	
	/* 警务救助部分开始 */
	
	.policeAssistance{
		top: 1020rpx;
		margin: 0 20rpx 120rpx 20rpx;
		padding: 20rpx;
		width: 670rpx;
		border-radius: 20rpx;
		background-color: white;
	}
	
	.policeAssistance .title{
		height: 88rpx;
		font-size: 34rpx;
		font-weight: bold;
		line-height: 88rpx;
	}
	
	.infoItem{
		width: 640rpx;
		padding: 20rpx 20rpx;
		display: flex;
		justify-content: space-between;
	}
	
	.infoItem image{
		width: 50rpx;
		height: 50rpx;
		margin: auto;
		margin-bottom: 20rpx;
	}
	
	.policeAssistance .infoItem>view{
		font-size: 26rpx;
		display: flex;
		text-align: center;
		flex-direction: column;
	}
	
	.infoItem>view>view:nth-child(3){
		font-style: oblique
	}
	
	.aaa{
		height: 100rpx;
	}
	
	
	/* 警务救助部分结束 */
	
	
</style>